@border: 1*@hd solid #DADADA;

.workplan-view-list-container {
  height: 100%;
  width: 100%;
  position: relative;
  line-height: normal;
  div {
    -webkit-overflow-scrolling: touch;
  }
  .active {
    box-shadow: 0*@hd 0*@hd 5*@hd @brand-primary;
  }
  .workplan-view-list-container-head{
    .date-picker{
      .workplan-week-datepicker{
        .workplan-week-datepicker-content{
          max-width: 130px;
          
        }
      }
    }
  }
  
  &-head {
    height: 44*@hd;
    width: 100%;
    overflow: hidden;
    border-bottom: @border;
    .date-picker {
      float: left;
      padding-top: 5*@hd;
      text-align: center;
    }
    .week-button {
      float: left;
      width: 15%;
      height: 28*@hd;
      line-height: 28*@hd;
      margin-top: 5*@hd;
      // margin-left: 1.4%;
      text-align: center;
      background: #FFFFFF;
      border: 1*@hd solid #BEBEBE;
      border-radius: 4*@hd;
    }
    .do-refresh {
      float: left;
      margin-left: 4.3%;
      width: 20*@hd;
      height: 20*@hd;
      margin-top: 10*@hd;
      color: #B2B2B2;
    }
    .do-select {
      float: right;
      margin-right: 4.3%;
      width: 20*@hd;
      height: 20*@hd;
      margin-top: 10*@hd;
      color: #B2B2B2;
    }
    .display-type {
      float: left;
      width: 20*@hd;
      height: 25*@hd;
      margin-top: 5*@hd;
      margin-left: 5%;
      padding-top: 3*@hd;
      .am-icon {
        display: table;
      }
    }
  }
  .wm-select-page {
    border-bottom: @border;
    .wm-select-page-input {
      .am-list-form {
        border: 0*@hd;
        .am-list-label {
          display: none;
        }
      }
    }
  }
  
  &-content-x {
    position: absolute;
    top: 45*@hd;
    bottom: 0*@hd;
    left: 0*@hd;
    right: 0*@hd;
    // background: #E8E8E8;
    table {
      border-spacing: 0;
    }
    .scroll-header {
      width: 100%;
      height: 44*@hd;
      border-bottom: @border;
      .left{
        float: left;
        height: 100%;
        border-right: @border;
        text-align: center;
        line-height: 44*@hd;
      }
      .right {
        float: left;
        width: calc(~"100% - "145*@hd);
        height: 100%;
        white-space: nowrap;
        overflow-x: scroll;
        .workplan-item{
          border-left: @border;
        }
        .workplan-item {
          display: inline-block;
          padding-left: 1*@hd;
          padding-right: 1*@hd;
          height: 100%;
          line-height: 44*@hd;
          text-align: center;
        }
      }
    }
   
    .scroll-content {
      width: 100%;
      height: calc(~'100% - '45*@hd);
     
      .left-scroll {
        float: left;
        width: 145*@hd;
        height: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
        .tr-left:first-child {
          // padding-bottom: 1*@hd;
        }
        .tr-left {
          font-family: PingFangSC-Regular; 
          font-size: 14*@hd;
          border-bottom: @border;
          width: 100%;
          overflow: hidden;
          position: relative;
          .name {
            float: left;
            display: flex;
            height: 100%;
            border-right: @border;
            position: absolute;
            word-break: break-all;
            top: 0*@hd;
            bottom: 0*@hd;
            min-height: 55*@hd;
            align-items: center;
            justify-content: center;
          }
          .timelabel {
            float: right;
            width: 50*@hd;
            height: 100%;
            .time-label:not(:first-child) {
              border-top: @border;
            }
            .time-label {
              display: flex;
              align-items: center;
              justify-content: center;
              border-right: @border;
            }
          }
          div {
           text-align: center;
          }
        }
      }
      .right-scroll {
        float: left;
        width: calc(~"100% - "145*@hd);
        height: 100%;
        overflow: auto;
        .scroll-content {
          height: 100%;
          width: 100%;
          border-collapse: collapse;
          white-space: nowrap;
          .tr-right {
            border-bottom: @border;
            border-left: @border;
            box-sizing: border-box;
            display: flex;
            .timerange:not(:first-child) {
              border-top: @border; 
            }
            .timerange {
              position: relative;
            }
            .workplan-item:not(:first-child) {
              border-left: @border;
            }
            .workplan-item {
              display: inline-block;
              // padding: 0*@hd;
              min-height: 55*@hd;
              height: inherit;
              white-space: normal;
              overflow: hidden;
              .workplan-item-showname {
                border-bottom: 1*@hd solid #fff;
                color: #fff;
                word-break: break-all;
                padding-top: 3*@hd;
                padding-bottom: 3*@hd;
              }
            }
            .item-time {
              width: 50*@hd;
              position: absolute;
              left: 0*@hd;
              right: 50*@hd;
              border: 1*@hd solid red;
            }
          }
        }

      }
    }
  }
}

.loaidng-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}

.workplanlist-select-conditions {
  height: 100%;
  .content {
    height: calc(~'100% - '47*@hd);
    overflow: auto;
  }
  .footer {
    position: fixed;
    bottom: 0*@hd;
    left: 0*@hd;
    right: 0*@hd;
    .am-flexbox-item {
      margin-left: 0*@hd;
    }
  }
}